<!--
@description ：托管账号列表
-->

<template>
  <div class="app-container">
    <el-row class="row-radar">
      <el-col :span="4">
        <div class="mt-20">
          <el-tree ref="tree" v-loading="treeLoading" :data="treeData" :expand-on-click-node="false" :props="treeProps"
                   default-expand-all highlight-current @node-click="handleNodeClick">
            <div slot-scope="{ node, data }" class="custom-tree-node">
              <el-tooltip v-if="node.label.length > 8" :content="node.label" effect="dark" placement="bottom">
                <span class="label-info">{{ node.label }}</span>
              </el-tooltip>
              <span v-else>{{ node.label }}</span>
              <el-dropdown v-if="data.id" trigger="click">
                <i class="el-icon-more" @click.stop></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item style="color: #082aff" @click.native="itemEdit(node, data)">修改名称
                  </el-dropdown-item>
                  <el-dropdown-item style="color: #082aff" @click.native="itemDel(node, data)">删除分组
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="data.sortId == '1'" style="color: #082aff"
                                    @click.native="itemSortEdit(node, data, 'up')">上移
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="data.sortId == groupTotal" style="color: #082aff"
                                    @click.native="itemSortEdit(node, data, 'down')">下移
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="data.sortId == '1'" style="color: #082aff"
                                    @click.native="itemSortEdit(node, data, 'top')">置顶
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="data.sortId == groupTotal" style="color: #082aff"
                                    @click.native="itemSortEdit(node, data, 'bot')">置底
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span v-if="!data.id" class="add" style="color: #082aff" @click="handleAddItem">
                <i class="el-icon-circle-plus-outline"></i>&nbsp;添加
              </span>
            </div>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" style="border-left: 1px solid #eee; padding: 16px 15px 20px 15px;">
        <div style="border-bottom: 1px solid #eee">
          <NormalForm :enumOpt="enumOpt" :formList="formList" :isShowCard="false" :operateForm="queryForm"
                      pageTitle="托管账号列表" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
        </div>
        <div style="text-align: right; margin: 20px 0;">
          <el-button type="primary" @click="getList">绑定账号</el-button>
        </div>
        <div>
          <el-table v-loading="loading" :data="tableList" max-height="560" min-height="420" style="width: 100%">
            <!-- <el-table-column align="center" type="selection" width="55"></el-table-column> -->
            <el-table-column :show-overflow-tooltip="false" align="center" label="头像/昵称" min-width="260" prop="">
              <template slot-scope="{ row }">
                <div style="display: flex;align-items: center;justify-content: center;flex-direction: row">
                  <div style="margin-right: 8px;display: flex;align-items: center;flex-direction: column">
                    <!--                    <img v-if="row.headerUrl" :src="row.headerUrl" alt=""-->
                    <!--                         style="width:30px; height:30px;border-radius:50%;margin-right:6px">-->
                    <!-- <img :src="require('@/assets/image/kol.png')" -->
                    <img :src="row.headImageUrl" style="width:60px; height:60px;border-radius:50%;margin-right:6px">
                    <div :class="row.status == '1' ? 'tab_online' : 'tabNoOnline'">
                      {{ row.status == '1' ? '在线' : '离线' }}
                    </div>
                  </div>
                  <span
                    style="line-height: 20px;display: flex;justify-content: start;align-items:start;flex-direction: column">
                    <div>
                      <span style="line-height: 20px;margin-right:6px">{{ row.userName || '' }}</span>
                      <svg-icon icon-class="qrCodeIcon" style="width:16px; height:16px;cursor: pointer" @click="showQrCode(row)"></svg-icon>
                    </div>
                    <div>绑定手机: {{ row.mobile || '' }}</div>
                    <div>企微账号: {{ row.weUserId || '' }}</div>
                    <div>绑定邮箱: {{ row.email || '--' }}</div>
                  </span>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column :show-overflow-tooltip="false" align="center" label="登录类型" min-width="120"
                             prop="">
            </el-table-column> -->
            <el-table-column :show-overflow-tooltip="false" align="center" label="好友数" min-width="120"
                             prop="friendNum">
              <template slot="header">
                <div>好友数
                  <el-tooltip content="分子：最新同步的该企微账号下的好友数量;分母：上一次同步的该企微账号下的好友数量" effect="dark" placement="top">
                    <i class="el-icon-info" style="margin-left: 4px;color: #CCCCCC"></i></el-tooltip>
                </div>
              </template>

              <template slot-scope="{ row }">
                <span>{{ row.friendNum || 0 }}/{{ row.lastFriendNum || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="false" align="center" label="群聊数" min-width="120"
                             prop="groupNum">
              <template slot="header">
                <div>群聊数
                  <el-tooltip content="分子：最新同步的该企微账号下的群聊数量;分母：上一次同步的该企微账号下的群聊数量" effect="dark" placement="top">
                    <i class="el-icon-info" style="margin-left: 4px;color: #CCCCCC"></i></el-tooltip>
                </div>
              </template>

              <template slot-scope="{ row }">
                <span>{{ row.groupNum || 0 }}/{{ row.lastGroupNum || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="false" align="center" label="其他设置" min-width="140">
              <template slot-scope="{ row }">
                <p>自动通过好友: {{ row.addFriendStatus == '1' ? '开' : '关' }}</p>
                <p>发送欢迎语: {{ row.sendCodeStatus == '1' ? '开' : '关' }}</p>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="false" align="center" label="绑定时间" min-width="160"
                             prop="createTime"></el-table-column>
            <el-table-column :show-overflow-tooltip="false" align="center" label="更新时间" min-width="160"
                             prop="updateTime"></el-table-column>
            <el-table-column :show-overflow-tooltip="false" align="center" label="管理者" min-width="160"
                             prop="mangerName"></el-table-column>
            <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作"
                             width="300">
              <template slot-scope="{ row }">
                <div style="display: flex; justify-content: space-around">
                  <el-button size="mini" type="text" @click="row.status == 1 ? editState(row) : getQRCode(row)">
                    {{ row.status == '2' ? '上线' : row.status == '1' ? '下线' : '' }}
                  </el-button>
                   <el-button size="mini" type="text" :disabled="row.status != '1'" @click="synchronousData(row)">同步数据</el-button>
                  <el-button size="mini" type="text" @click="deleteItem(row, 'updateTable')">编辑分组</el-button>
                  <el-button size="mini" type="text" @click="deleteItem(row, 'delTable')">删除
                  </el-button>
                  <el-button size="mini" type="text" @click="getdialogList2(), deleteItem(row, 'adminVisi'), $refs.adminForm.resetFields()">修改管理者
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                            @handleCurrentChange="getListFn" @handleSizeChange="getListFn"></NormalPagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="loginVisible"
               title="登录超级企微"
               width="800px">
      <div v-if="active == 0" class="login_top_info">
        <i class="el-icon-warning" style="color: #082aff;margin-right: 6px"></i>
        <span>首次新设备绑定登录企微，需要等待15分钟</span>
      </div>
      <div v-if="active == 1" class="login_top_info" style="color: #082aff;">
        <i class="el-icon-warning" style="margin-right: 6px"></i>
        <span>因网络状态，二维码获取和扫码成功后可能延迟，若等待时间较长，可刷新页面重新获取二维码</span>
      </div>
      <el-steps :active="active" simple>
        <el-step title="选择端口">
          <div slot="icon">
            <svg-icon v-if="active == 0" icon-class="step_1_active"></svg-icon>
            <svg-icon v-if="active == 1 || active == 2" icon-class="step_success"></svg-icon>
          </div>
        </el-step>
        <el-step title="扫码上号">
          <div slot="icon">
            <svg-icon v-if="active == 1" icon-class="step_2_active"></svg-icon>
            <svg-icon v-if="active == 2" icon-class="step_success"></svg-icon>
            <svg-icon v-if="active == 0" icon-class="step_2_noActive"></svg-icon>
          </div>
        </el-step>
        <el-step title="登录完成">
          <div slot="icon">
            <svg-icon v-if="active == 2" icon-class="step_3_active"></svg-icon>
            <svg-icon v-if="active == 0 || active == 1" icon-class="step_3_noActive"></svg-icon>
          </div>
        </el-step>
      </el-steps>

      <div v-if="active == 0">
        <el-form ref="bindForm" :model="bindForm" :rules="bindRules" label-width="120px" style="margin:20px 0 0 60px">
          <el-form-item label="选择绑定员工">
            <el-select v-model="bindForm.weUserId" clearable filterable placeholder="请选择" style="width: 300px">
              <el-option v-for="item in dialogList2" :key="item.userId" :label="item.name" :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择分组">
            <el-select v-model="bindForm.categoryId" clearable placeholder="请选择" style="width: 300px">
              <el-option v-for="item in treeData[0].children" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择设备" prop="deviceInfoId">
            <el-select v-model="bindForm.deviceInfoId" clearable placeholder="请选择" style="width: 300px">
              <el-option v-for="item in deviceList" :key="item.deviceInfoId" :label="item.deviceName"
                         :value="item.deviceInfoId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-descriptions :column="1" class="margin-top" style="margin: 20px 0 0 60px" title="使用须知">
          <el-descriptions-item label="1">登录成功后将在手机上方显示[Windows已登录]</el-descriptions-item>
          <el-descriptions-item label="2">请勿在其他设备登录该企业微信</el-descriptions-item>
          <el-descriptions-item label="3">不要在手机上点击退出[windows企业微信]</el-descriptions-item>
          <el-descriptions-item label="4">不要在手机端企业微信切换其他企业或退出登录</el-descriptions-item>
        </el-descriptions>
        <el-checkbox v-model="checked" style="margin: 10px 0 0 60px">我已阅读以上注意点</el-checkbox>
      </div>

      <div v-if="active == 1 && activeFlag == 'login'" style="display: flex;flex-direction: column;align-items: center;text-align: center;">

        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="120px"
                 style="margin: 16px 0 0 26px" @submit.prevent.native>
          <div style="width: 150px;height: 150px;margin-left: 90px" class="login-qrCode">
            <img :src="loginForm.qrcode" style="width: 100%" alt=""  v-if="loginForm.qrcode">
            <div v-if="percentage == 100" @click="getQRCode({loginUser})" class="login-failBg">
              <div>二维码已失效</div>
              <div><span type="button" style="color: #00afff;margin-top: 20px;cursor: pointer"><i class="el-icon-refresh-left" style="margin-right: 4px"></i>刷新</span></div>
            </div>
          </div>

          <p style="color: #ccc;font-size: 12px;line-height: 24px">
            请使用 企业微信APP 扫一扫登陆
          </p>
          <p style="color: #ccc;font-size: 12px;line-height: 24px">
            该二维码有效时间为2分钟，失效后请重新获取
          </p>
          <el-form-item label="验证码" prop="verificationCode">
            <el-input v-model="loginForm.verificationCode" placeholder="请输入" style="width: 200px;"/>
          </el-form-item>
        </el-form>
        <el-progress :percentage="percentage" style="width: 700px"></el-progress>
      </div>

      <div v-if="active == 1 && activeFlag == 'fail'" style="display: flex;flex-direction: column;align-items: center;">
          <svg-icon icon-class="chacha" style="margin: 40px 0 16px;font-size: 70px"></svg-icon>
          <p>登录失败</p>
          <div class="fail_info_area">
            <p>登录失败，可能是以下原因:</p>
            <div><i class="el-icon-circle-close" style="color: #082aff;margin-right: 6px"></i>二维码失效已过期</div>
            <div><i class="el-icon-circle-close" style="color: #082aff;margin-right: 6px"></i>当前账号已在其他设备登录</div>
          </div>
      </div>

      <div v-if="active == 2" style="display: flex;flex-direction: column;align-items: center">
          <svg-icon icon-class="loginSuccess" style="font-size: 70px;margin-top: 80px"></svg-icon>
          <div style="margin: 16px 0 50px">登录成功</div>
          <el-button type="primary" @click="loginVisible = false, handleQuery()" style="width: 140px">确定</el-button>
      </div>

      <div slot="footer" style="border-top: 1px solid #f0f0f0;padding-top: 18px">
        <el-button type="info" v-if="active == 0 || (active == 1 && activeFlag == 'login')" plain @click="loginVisible = false">取 消</el-button>
        <el-button v-if="active == 0" :disabled="!checked" :loading="toCodeLoading" type="primary"
                   @click="toCode">扫码上线
        </el-button>
        <el-button v-if="active == 1 && activeFlag == 'login'" :loading="loginLoading" type="primary" @click="login">登录</el-button>
        <div style="display: flex;justify-content: center" v-if="active == 1 && activeFlag == 'fail'">
          <el-button :loading="loginLoading" type="primary" @click="getQRCode({loginUser})">重 试</el-button>
          <el-button type="info" @click="loginVisible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="adminVisi" title="修改管理者"
               width="400px">
      <el-form ref="adminForm" :model="adminForm" :rules="adminRules" label-width="100px">
        <el-form-item label="员工:" prop="name">
          <!-- <el-select v-model="adminForm.name" clearable placeholder="选择分组">
            <el-option v-for="item in treeData[0].children" :key="item.id" :label="item.name" :value="item.name">
            </el-option>
          </el-select> -->
          <el-select v-model="adminForm.name" clearable filterable placeholder="请选择">
            <el-option v-for="item in dialogList2" :key="item.userId" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button plain type="info" @click="adminVisi = false">取 消
        </el-button>
        <el-button :loading="adminLoading" type="primary" @click="adminSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :title="treeForm.id ? '编辑' : '添加' + '分组'"
               :visible.sync="treeDialogVisible" width="400px">
      <el-form ref="treeForm" :model="treeForm" label-width="120px">
        <el-form-item label="请输入分组名称">
          <el-input v-model="treeForm.name" maxlength="32" placeholder="请输入" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button plain type="info" @click="treeDialogVisible = false">取 消
        </el-button>
        <el-button type="primary" @click="treeSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除分组 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="delVisible"
               title="删除分组确认"
               width="400px">
      <span>确认删除该分组吗？</span>
      <div slot="footer">
        <el-button plain type="info" @click="delVisible = false">取 消
        </el-button>
        <el-button type="primary" @click="treeDelSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!--   下线 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="onlineVisible"
               title="下线确认"
               width="400px">
      <span><i class="el-icon-question" style="color: #082aff;font-size: 14px"></i> 确认下线账号？</span>
      <div slot="footer">
        <el-button plain type="info" @click="onlineVisible = false">取 消
        </el-button>
        <el-button type="primary" @click="onlineSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑分组 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="updateTable" append-to-body
               title="编辑分组" width="460px">
      <el-form ref="updateForm" :model="updateForm" :rules="updateRules" label-width="160px">
        <el-form-item label="请选择分组:" prop="newId">
          <el-select v-model="updateForm.newId" clearable placeholder="选择分组">
            <el-option v-for="item in treeData[0].children" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button plain type="info" @click="updateTable = false">取 消
        </el-button>
        <el-button type="primary" @click="updateSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 移动分组 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="delToReVisible"
               append-to-body
               title="移动分组" width="460px">
      <div class="delToRe_info">
        <i class="el-icon-warning" style="color: #082aff;margin-right: 6px"></i>
        <span>{{ `该分组共有${delGroupTotal}条数据，请移入其他分组` }}</span>
      </div>
      <el-form ref="delToReForm" :model="delToReForm" :rules="delToReRules" label-width="160px">
        <el-form-item label="请选择要移入的分组:" prop="newId">
          <el-select v-model="delToReForm.newId" clearable placeholder="请选择分组">
            <el-option v-for="item in newGroupList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button plain type="info" @click="delToReVisible = false">取 消
        </el-button>
        <el-button type="primary" @click="treeDelToReSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除table数据 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="delTable" title="删除"
               width="400px">
      <span>确认删除【{{currentRow ? currentRow.userName : '用户'}}】？</span>
      <div slot="footer">
        <el-button type="info" @click="delTable = false">取 消</el-button>
        <el-button :loading="delLoading" type="primary" @click="toSureDel">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="showImageVisible" title="二维码预览" width="600px" append-to-body :close-on-click-modal="false">
      <img width="100%" :src="qrCodeImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/organization'
import {queryDeviceInfoList} from '@/api/equipment/index'
import {categoryAddCorp, categoryDelCorp, categoryEditCorp, categoryList} from "@/api/article/group";
import {
  automateDelete,
  automateList,
  automateSan,
  bindAccount,
  delRadarCategory,
  downline,
  queryRadarCount,
  sign,
  sortRadarCategory,
  updateCategory,
  updateManger,
  queryAccountCount, synchronization
} from '@/api/escrowAccount/index'

export default {
  name: "escrowAccount", //托管账号列表
  props: {},
  components: {},
  data() {
    return {
      dialogList2: [],
      deviceList: [],
      loginVisible: false,
      checked: true,
      toCodeLoading: false,
      loginLoading: false,
      adminLoading: false,
      adminVisi: false,
      active: 0,
      adminForm: {},
      bindForm: {},
      loginForm: {},
      loginRules: {
        // verificationCode: [{
        //   required: true, message: '请输入验证码', trigger: 'blur'
        // }]
      },
      adminRules: {
        name: [{
          required: true, message: '请选择', trigger: 'change'
        }]
      },
      bindRules: {
        // weUserId: [{
        //   required: true, message: '请选择', trigger: 'change'
        // }],
        // categoryId: [{
        //   required: true, message: '请选择', trigger: 'change'
        // }],
        deviceInfoId: [{
          required: true, message: '请选择', trigger: 'change'
        }],
      },
      treeForm: {
        id: '',
        name: '',
      },
      treeData: [
        {
          id: '',
          name: '全部',
          parentId: 0,
          hasParent: false,
          hasChildren: true,
          children: []
        },
      ],
      treeProps: {
        children: 'children',
        label: 'name'
      },
      groupTotal: 0, //分组数据总数
      queryForm: {
        name: '',
        states: '',
        pageNum: 1,
        pageSize: 10,
      }, // 查询问卷
      formList: [
        {
          label: '昵称',
          value: [],
          prop: 'name',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '在线状态',
          value: '',
          prop: 'status',
          type: 'SELECT',
          emunName: 'statesList'
        },
      ], // 查询框
      enumOpt: {
        statesList: [
          {dictLabel: '在线', dictValue: '1'},
          {dictLabel: '离线', dictValue: '2'},
        ],
      },
      tableList: [], // 表格数据
      total: 0, //表格数据总数
      loading: false,
      treeDialogVisible: false, // 新增/编辑分组
      delVisible: false, // 分组删除确认
      delTable: false, // 表格删除确认
      updateTable: false, // 表格删除确认
      updateVisible: false,
      treeLoading: false,
      delToReVisible: false, //移动分组弹窗
      delToReForm: {
        newId: '',
      },
      updateForm: {
        newId: '',
      },
      newGroupList: [], // 移动分组的数据
      delToReRules: {
        newId: {
          required: true, message: '要移入的分组不能为空', trigger: 'change'
        },
      },
      updateRules: {
        newId: {
          required: true, message: '分组不能为空', trigger: 'change'
        },
      },
      delGroupTotal: 0,
      currentGroupId: '',
      currentRow: null,
      delLoading: false,
      percentage: 0,
      activeFlag: 'login',
      loginUser: '',
      qrCodeImageUrl: '',
      showImageVisible: false,
      onlineVisible: false,
    }
  },
  watch: {},
  methods: {
    adminSubmit() {
      this.adminForm.automateId = this.currentRow.automateId
      this.$refs.adminForm.validate(valid => {
        if (valid){
          this.adminLoading = true;
          updateManger(this.adminForm).then(res => {
            if (res.code == 200) {
              this.handleQuery()
              this.$message.success(res.msg)
              this.adminVisi = false
            } else this.$message.error(res.msg);
          }).finally(() => this.adminLoading = false)
        }
      })
    },
    toCode() {
      if (!this.checked) this.$message.error('请先阅读注意点')
      this.toCodeLoading = true
      this.$refs.bindForm.validate(valid => {
        if(valid){
          bindAccount(this.bindForm).then(res => {
            if (res.code == 200) {
              this.getQRCode(res.data)
              this.toCodeLoading = false
            }
          }).catch(() => {
            this.toCodeLoading = false
          })
        }else{
          this.toCodeLoading = false
        }
      })
    },
    getQRCode(data) {
      console.log(data,data.guId,'data.guId');
      this.loginUser = data.automateId
      let params = {};
      if(data.guId!=undefined&&data.guId!=null){
        params.guId = data.guId;
      }
      automateSan(params).then(res => {
        if (res.code == 200) {
          this.active = 1
          this.activeFlag = 'login'
          // this.loginForm = res.data
          // this.loginForm.automateId = automateId
          this.loginForm = {
             ...res.data,
            automateId: data.automateId,
          }
          this.loginVisible = true
          this.percentage = 0
          const interval = setInterval(() => {
            console.log('倒计时执行', this.percentage)
            if (this.percentage < 100) {
              this.percentage = Number(this.percentage) + 0.84
              this.percentage = Number(this.percentage.toFixed(1))
            } else {
              this.percentage = 100
              clearInterval(interval);
            }
            this.$set(this, 'percentage', this.percentage)
            // if (this.percentage >= 100) { clearInterval(interval); } },
          },1000);
        } else this.$message.error(res.msg);
      })
    },
    login() {
      this.$refs.loginForm.validate(valid => {
        if(valid){
          this.loginLoading = true;
          sign(this.loginForm).then(res => {
            if (res.code == 200) {
              this.active = 2
              this.handleQuery()
            }else if(res.code == 201){
              this.activeFlag = 'fail'
            }
          }).finally(() => this.loginLoading = false)}
      })
    },
    getList() {
      this.bindForm = {}
      this.active = 0
      this.getdialogList2()
      queryDeviceInfoList().then(res => {
        this.deviceList = res.rows || []
      })
      this.loginVisible = true;
    },
    getdialogList2() {
      if (this.dialogList2.length == 0) {
        api.getList({
          name: '',
          department: '',
          pageNum: 1,
          pageSize: 99999,
          isActivate: '',
        })
          .then(({rows}) => {
            this.dialogList2 = rows
            console.log(this.dialogList2, 'dialoglist2', '数组列')
          })
      }
    },
    // 获取分组数据
    getNodeFn() {
      let params = {
        levelType: '0',
        mediaType: '13',
      }
      categoryList(params).then(res => {
        if (res.code == 200) {
          this.groupTotal = res.data ? res.data.length : 0
          this.$set(this.treeData[0], 'children', res.data)
        }
      })
    },
    // 分组点击事件
    handleNodeClick(data) {
      console.log(data, '分组排序事件')
      this.queryForm.categoryId = data.id
      this.currentGroupId = data.id
      this.getListFn()
    },
    // 编辑分组
    itemEdit(node, data) {
      console.log(node, data, '修改分组')
      this.treeForm = data
      this.treeDialogVisible = true
    },
    // 删除分组
    itemDel(node, data) {
      console.log(node, data, '删除分组')
      this.treeForm = data
      this.delVisible = true
    },
    // 新增/修改分组提交
    treeSubmit() {
      this.$refs.treeForm.validate(async (valid) => {
        if (valid) {
          const params = {
            id: this.treeForm.id || null,
            levelType: '0',
            mediaType: '13',
            name: this.treeForm.name
          }
          if (this.treeForm.id) {
            categoryEditCorp(params).then(res => {
              this.treeDialogVisible = false
              this.$message.success('分组编辑成功')
              this.getNodeFn()
            })
          } else {
            categoryAddCorp(params).then(res => {
              this.treeDialogVisible = false
              this.$message.success('分组添加成功')
              this.getNodeFn()
            })
          }
        } else {
          return false
        }
      })
    },
    // 数组排序修改
    itemSortEdit(node, data, flag) {
      console.log(flag, 'flag')
      let arr = JSON.parse(JSON.stringify(this.treeData[0].children))
      if (flag == 'up') {
        // 上移
        // 定义要交换位置的对象索引
        let index1 = +data.sortId - 1;
        let index2 = +data.sortId - 2;
        // 交换位置
        let temp = arr[index1];
        arr[index1] = arr[index2];
        arr[index2] = temp;
        console.log(arr, '上移', index1, index2)
      } else if (flag == 'down') {
        // 下移
        // 定义要交换位置的对象索引
        let index1 = +data.sortId - 1;
        let index2 = +data.sortId;
        // 交换位置
        let temp = arr[index1];
        arr[index1] = arr[index2];
        arr[index2] = temp;
        console.log(arr, '下移', index1, index2)
      } else if (flag == 'top') {
        // 置顶
        // 将元素移动到最前面
        let index = +data.sortId - 1;
        let element = arr.splice(index, 1)[0]; // 先将元素从数组中删除并保存到变量中
        arr.unshift(element); // 再将元素插入到数组的最前面
        console.log(arr, '置顶')
      } else if (flag == 'bot') {
        // 置底
        // 将元素移动到最后面
        let index = +data.sortId - 1;
        let element = arr.splice(index, 1)[0]; // 先将元素从数组中删除并保存到变量中
        arr.push(element); // 再将元素插入到数组的最后面
        console.log(arr, '置底')
      }
      arr.forEach((item, ind) => {
        item.sortId = String(ind + 1)
      })
      const idList = arr.map(item => item.id)
      this.treeLoading = true
      sortRadarCategory({idList}).then(res => {
        if (res.code == 200) this.getNodeFn()
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    // 删除分组提交
    treeDelSubmit() {
      queryAccountCount({id: this.treeForm.id}).then(res => {
        if (res.code == 200) {
          if (res.data.delFlag == true) {
            categoryDelCorp(this.treeForm.id).then(res => {
              if (res.code == 200) {
                this.$message.success('删除成功')
                this.getNodeFn()
                this.delVisible = false
              }
            })
          } else {
            this.delGroupTotal = res.data.radarCount || 0
            this.currentGroupId = this.treeForm.id
            this.delToReVisible = true
            this.newGroupList = this.treeData[0].children.filter(item => item.id != this.treeForm.id)
            this.delToReForm.newId = this.newGroupList ? this.newGroupList[0]?.id : ''
          }
        }
      })
    },
    // 添加分组
    handleAddItem() {
      this.treeForm = {
        id: '',
        name: '',
      }
      this.treeDialogVisible = true
    },
    // 筛选
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    // 查询
    getListFn() {
      let params = {
        ...this.queryForm,
        categoryId: this.currentGroupId || ''
      }
      this.tableList = []
      this.loading = true
      automateList(params).then(res => {
        if (res.code == 200) {
          this.tableList = res.rows
          this.total = res.total;
          console.log('tableList', this.tableList);
        }
      }).finally(() => this.loading = false)
    },
    // 重置
    handleReset() {
      this.queryForm = {
        name: '',
        status: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.currentGroupId = ''
      this.getNodeFn()
      this.getListFn()
    },
    //  下线
    editState(row) {
      this.currentRow = row
      this.onlineVisible = true

    },
    onlineSubmit(){
      downline(this.currentRow).then(res => {
        if (res.code == 200) {
          this.handleQuery()
          this.$message.success(res.msg)
          this.onlineVisible = false
        } else this.$message.error(res.msg)
      })
    },
    // 删除
    deleteItem(row, dialog) {
      this[dialog] = true
      this.currentRow = {...row}
      console.log(this.currentRow, '1234')
      console.log('treeData', this.treeData);
    },
    // 删除确认
    toSureDel() {
      this.delLoading = true
      automateDelete({automateId: this.currentRow.automateId}).then(res => {
        if (res.code == 200) {
          this.delTable = false
          this.handleQuery()
          this.$message.success(res.msg)
        } else this.$message.error(res.msg)
      }).finally(() => this.delLoading = false)
    },
    // 移动分组
    treeDelToReSubmit() {
      this.$refs.delToReForm.validate((valid) => {
        if (valid) {
          let params = {
            id: this.currentGroupId,
            newId: this.delToReForm.newId
          }
          delRadarCategory(params).then(res => {
            if (res.code == 200) {
              this.$message.success('分组迁移成功')
              this.currentGroupId = ''
              this.delToReVisible = false
              this.delVisible = false
              this.getNodeFn()
              this.getListFn()
            }
          })
        }
      })
    },
    // 编辑分组
    updateSubmit() {
      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          let params = {
            automateId: this.currentRow.automateId,
            newId: this.updateForm.newId
          }
          updateCategory(params).then(res => {
            if (res.code == 200) {
              this.$message.success('分组迁移成功')
              this.updateTable = false
              this.getNodeFn()
              this.getListFn()
            }
          })
        }
      })
    },
    // 展示二维码
    showQrCode(row) {
      if(row.qrCode){
        this.showImageVisible = true
        this.qrCodeImageUrl = row.qrCode;
      }
    },
    // 同步数据
    synchronousData(row){
      if(row.status != 1) return
      synchronization({automateId: row.automateId}).then(res => {
        if (res.code == 200) this.getListFn()
      }).catch()
    }
  },
  mounted() {
    this.getNodeFn()
    this.handleQuery()
  },
}

</script>

<style lang="scss" scoped>
::v-deep.app-container {
  height: 100%;
  padding: 0;
}

.row-radar {
  background: #fff;
  height: 100%;
  border-radius: 8px;

  ::v-deep {
    .el-tabs__header {
      margin: 0;
    }

    .el-tree {
      padding: 10px 10px 0 10px;
    }

    .el-tree-node__content {
      height: 35px;
      padding-left: 10px !important;
    }
  }
}

.custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  font-size: 12px;

  .label-info {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

::v-deep.el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #cdf3df !important;
  color: #06c160 !important;
}

::v-deep.el-dropdown-menu__item.is-disabled {
  color: #bbb !important;
}

.delToRe_info {
  padding: 8px 10px;
  color: #082aff;
  margin-bottom: 10px;
  background-color: #EBEEFF;
  border-radius: 8px;
}

.tab_online {
  position: relative;
  height: 20px;

  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #00ff00;
    top: 8px;
    left: -8px;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 6;
  }
}

.tabNoOnline {
  position: relative;
  height: 20px;

  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #ccc;
    top: 8px;
    left: -8px;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 6;
  }
}

.login_top_info {
  height: 31px;
  background: #EBEEFF;
  border-radius: 2px;
  line-height: 31px;
  margin-bottom: 20px;
  padding-left: 12px;
  font-size: 10px;
}

::v-deep.el-step__icon.is-text {
  border: 0 !important;
  width: 24px;
  height: 24px;
  font-size: 24px !important;

  div {
    font-size: 24px;
  }
}

::v-deep.el-steps--simple {
  background: #fff;
  border-bottom: 1px solid #F0F0F0;
}

::v-deep.el-step.is-simple > .el-step__main > .el-step__title.is-process {
  color: #082aff;
  position: relative;

  &::before {
    content: '';
    display: block;
    border-bottom: 3px solid #082aff;
    position: absolute;
    border-radius: 1px;
    width: 186px;
    position: absolute;
    top: 32px;
    left: -70px;
  }
}

::v-deep.el-step.is-simple .el-step__icon {
  font-size: 24px;
  border: 0;
}

.fail_info_area{
  background: rgba(238,238,238,0.3);
  border-radius: 4px;
  width: 700px;
  padding: 10px 26px;
  margin-top: 20px;
  line-height: 24px;
  color: #505050;
  p{
     line-height: 40px;
    font-weight: 500;
  }
}

.login-qrCode{
  position: relative;
}

.login-failBg{
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(255,238,238,0.9);
  top: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  color: #000;
  justify-content: center;
}

::v-deep.el-button.is-disabled{
  color: #cccccc!important;
}
</style>
